<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>js动画,js动画钩子，velocity.js</title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="velocity.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="root">
			
			<!-- 动画钩子 -->
			<!-- 1.@before-enter 在显示之前调用, handleBeforeEnter方法接收的参数将该动画DOM传递给数据层 -->
			<!-- 2.@enter 动画主体开始执行，动画的主体变化应该写在这里,handleEnter方法接收动画DOM和一个完成回调函数 -->
			<!-- 3.@after-enter 动画主体执行完毕，handleAfterEnter方法接收动画DOM -->
			<!-- 离场动画也同上，有@before-leave,@leave,@after-leave 离场前，离场，离场后三个动画钩子-->
			
			<transition
				 name="fade"
				 @before-enter= "handleBeforeEnter($event)"
				 @enter = "handleEnter"
				 @after-enter = "handleAfterEnter($event)"
			 >
				<div v-if = "show">hello world</div>
			</transition>
			<button type="button" @click="handleClick()">toggle</button>
		</div>
	</body>
	<script type="text/javascript">
// 		var vm = new Vue({
// 			el:"#root",
// 			data:{
// 				show: true
// 			},
// 			methods:{
// 				handleClick: function () {
// 					this.show = !this.show;
// 				},
// 				handleBeforeEnter: function (el) {
// 					el.style.color = "red";
// 				},
// 				handleEnter: function(el,done){
// 					setTimeout(()=>{
// 						el.style.color = "green";
// 					},2000);
// 					setTimeout(()=>{
// 						done()
// 					},4000)
// 				},
// 				handleAfterEnter: function (el) {
// 					el.style.color = "#000";
// 				}
// 			}
// 		})
		var vm = new Vue({
			el:"#root",
			data:{
				show: true
			},
			methods:{
				handleClick: function () {
					this.show = !this.show;
				},
				handleBeforeEnter: function (el) {
					el.style.opacity = 0;
				},
				handleEnter: function(el,done){
					Velocity(el, {opacity: 1}, {duration: 1000, complete: done})
				},
				handleAfterEnter: function (el) {
					console.log("动画结束")
				}
			}
		})
	</script>
</html>